<template>
  <cs-card>
    <el-table
      ref="multipleTable"
      :data="tableData.list"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      class="contentTable_G"
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column prop="communityId" label="小区ID" width="260">
      </el-table-column>
      <el-table-column prop="name" label="小区名称" width="160">
      </el-table-column>
      <el-table-column label="附件地标" width="200" prop="nearbyLandmarks">
      </el-table-column>
      <el-table-column prop="cityCode" label="城市编码" width="350">
      </el-table-column>
      <el-table-column prop="communityCode" label="社区编码" width="160">
        <template v-slot="scoped">
          <span>{{
            scoped.row.communityCode ? scoped.row.communityCode : "——"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="120"
        :filters="statusFilters"
        :filter-method="statusFilterTag"
      >
        <template v-slot="scoped">
          <span>{{ scoped.row.status === true ? "审核完成" : "待审核" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="limit" label="户数限制" width="180">
        <template v-slot="scoped">
          <span>{{ scoped.row.limit ? scoped.row.limit : "——" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template>
          <el-link
            type="primary"
            class="el-linkRightMargin_G"
            @click="alterLinkClick"
            >修改</el-link
          >
          <el-link type="primary" class="el-linkRightMargin_G"
            >审核撤回</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <div id="pagination_section_G">
      <span class="currentSelect_G">{{ `共${tableData.totalCount}项` }}</span>
      <div class="pagination_right_G">
        <span>{{ `${tableData.pageSize}条/页` }}</span>
        <cs-pagination
          :currentPage="tableData.currPage"
          :totalPage="tableData.totalPage"
          @firstPageClick="firstPageClick"
          @previousPageClick="previousPageClick"
          @nextPageClick="nextPageClick"
          @lastPageClick="lastPageClick"
          @junkToOtherPage="junkToOtherPage"
        />
      </div>
    </div>
  </cs-card>
</template>

<script>
import CsCard from "@/components/CsCard/CsCard.vue";
import CsPagination from "@/components/CsPagination/CsPagination.vue";

export default {
  name: "adTable",
  components: {
    CsCard,
    CsPagination,
  },
  props: {
    tableData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      // tableData: [
      //   {
      //     id: "2021032413900011",
      //     name: "雅丽家园",
      //     landmark: "万达",
      //     cityCode: "天津省天津市南开区",
      //     communityCode: "",
      //     status: true,
      //     limit: "",
      //   },
      //   {
      //     id: "2021032413900011",
      //     name: "大榕树",
      //     landmark: "万达",
      //     cityCode: "广西壮族自治区北海市银海区",
      //     communityCode: "",
      //     status: false,
      //     limit: "",
      //   },
      //   {
      //     id: "2021032413900011",
      //     name: "园辉新都",
      //     landmark: "桂电",
      //     cityCode: "广西壮族自治区北海市银海区",
      //     communityCode: "5670000",
      //     status: true,
      //     limit: "",
      //   },
      //   {
      //     id: "2021032413900011",
      //     name: "大湾小区",
      //     landmark: "金滩",
      //     cityCode: "广西壮族自治区北海市银海区",
      //     communityCode: "5670000",
      //     status: true,
      //     limit: "5965",
      //   },
      //   {
      //     id: "2021032413900011",
      //     name: "万家兴苑",
      //     landmark: "北部湾广场",
      //     cityCode: "广西壮族自治区北海市银海区",
      //     communityCode: "5670000",
      //     status: true,
      //     limit: "548",
      //   },
      //   {
      //     id: "2021032413900011",
      //     name: "绿洲金帝",
      //     landmark: "万达广场",
      //     cityCode: "广西壮族自治区北海市银海区",
      //     communityCode: "5670000",
      //     status: true,
      //     limit: "838",
      //   },
      //   {
      //     id: "2021032413900011",
      //     name: "大山现代城",
      //     landmark: "吾悦广场",
      //     cityCode: "广西壮族自治区北海市银海区",
      //     communityCode: "5670000",
      //     status: true,
      //     limit: "382",
      //   },
      //   {
      //     id: "2021032413900011",
      //     name: "紫薇英伦小镇",
      //     landmark: "万达广场",
      //     cityCode: "广西壮族自治区北海市银海区",
      //     communityCode: "5670000",
      //     status: true,
      //     limit: "",
      //   },
      //   {
      //     id: "2021032413900011",
      //     name: "绿茵广场",
      //     landmark: "新大润发",
      //     cityCode: "广西壮族自治区北海市银海区",
      //     communityCode: "5670000",
      //     status: true,
      //     limit: "583",
      //   },
      //   {
      //     id: "2021032413900011",
      //     name: "吴海梧桐",
      //     landmark: "江尾公园",
      //     cityCode: "广西壮族自治区北海市银海区",
      //     communityCode: "5670000",
      //     status: true,
      //     limit: "931",
      //   },
      // ],
      statusFilters: [
        { text: "审核完成", value: "true" },
        { text: "待审核", value: "false" },
      ],
      // // 当前页码
      // currentPage: 1,
      // // 一页的条数
      // pageSize: 10,
      // // 总共多少条数据
      // totalCount: 0,
      // // 总共多少页
      // totalPage: 0,
      currentSelect: 0,
    };
  },
  methods: {
    statusFilterTag(value, row, column) {
      console.log({ value, row, column });
      return row.tag === value;
    },
    // 删除广告链接点击事件
    alterLinkClick() {
      this.$emit("tableAlterLinkClick");
    },
    // 第一页按钮点击
    firstPageClick() {
      this.$emit("firstPageClick");
    },
    // 上一页按钮点击
    previousPageClick() {
      this.$emit("previousPageClick");
    },
    // 下一页按钮点击
    nextPageClick() {
      this.$emit("nextPageClick");
    },
    // 最后一页按钮点击
    lastPageClick() {
      this.$emit("lastPageClick");
    },
    junkToOtherPage(pageNum) {
      this.$emit("junkToOtherPage", pageNum);
    },
  },
};
</script>

<style lang="sass" scoped></style>
